<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import { ref, watch } from 'vue';

const props = defineProps({
    baseImageUrl: {
        type: String,
        default: ''
    },
    keyWords: {
        type: Array,
        default: []
    }
})

const emits = defineEmits(['uploadImg'])


const queryParams = ref({
    promptType: 1, // 类型
    baseImageUrl: '', // 图片
    prompt: [], // 文字
})


watch(() => props.baseImageUrl, (val) => {
    if (val) {
        queryParams.value.baseImageUrl = val
    }
}, { deep: true, immediate: true })


function getQueryParams() {
    const data = Object.assign({}, queryParams.value)
    data.prompt = queryParams.value.prompt.join(',')
    return data

}


// 关键词选中
function keyWordsClick(e) {
    if (queryParams.value.prompt.includes(e.title)) {
        return queryParams.value.prompt = queryParams.value.prompt.filter(item => item !== e.title)
    }
    if (queryParams.value.prompt.length >= 4) {
        Toast.fail('最多选择四条')
    } else {
        queryParams.value.prompt.push(e.title)
    }
}

defineExpose({ getQueryParams })
</script>

<template>
    <div class='bgInstruction'>
        <div class="uploadImg">
            <img v-if="queryParams.baseImageUrl" :src="queryParams.baseImageUrl" mode="aspectFit" class="imgSty" alt="">
            <div class="upload_btn" v-else>
                <i class="iconfont ai-icon-shangchuancankaotu"></i>
                <div class="text">相册选择</div>
            </div>
        </div>

        <div class="title_box">
            关键词
            <span class="text">（非必选）</span>
        </div>
        <div class="keyWords">
            <div class="keyWords_item" v-for="item of keyWords" :key="item.key"
                :class="{ active: queryParams.prompt.includes(item.title) }" @click="keyWordsClick(item)">
                <div class="text">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.bgInstruction {
    .title_box {
        font-size: 28rpx;
        color: #FFFFFF;
        font-weight: bold;
        position: relative;
        padding-left: 30rpx;
        margin-top: 40rpx;
        margin-bottom: 18rpx;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
            width: 12rpx;
            height: 18rpx;
            background: #83CD88;
            border-radius: 6rpx;
        }

        .text {
            font-size: 24rpx;
            font-weight: normal;
        }
    }

    .uploadImg {
        position: relative;
        box-sizing: border-box;
        height: 878rpx;
        background: var(--a-main-box-bg-color);
        border-radius: 20rpx;
        margin-top: 22rpx;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        .imgSty {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
        }

        .upload_btn {
            width: 228rpx;
            height: 84rpx;
            border-radius: 45rpx;
            border: 3rpx solid var(--a-main-color);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10rpx;

            .iconfont {
                font-size: 32rpx;
                color: var(--a-one-text-color);
            }

            .text {
                font-size: 32rpx;
                color: var(--a-one-text-color);
            }
        }

        .clearBox {
            position: absolute;
            bottom: 20rpx;
            right: 20rpx;
            z-index: 999;
            color: var(--a-one-text-color);
            width: 59rpx;
            height: 59rpx;
            background-color: #fff;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .iconfont {
                font-size: 36rpx;
            }

            .anewUpload {
                font-size: 22rpx;
            }
        }
    }

    .keyWords {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22rpx;

        .keyWords_item {
            box-sizing: border-box;
            height: 80rpx;
            font-size: 24rpx;
            padding: 0 5rpx;
            color: var(--a-two-text-color);
            border-radius: 20rpx;
            background: var(--a-main-box-bg-color);
            display: flex;
            align-items: center;
            justify-content: center;

            &.active {
                color: var(--a-one-text-color);
                background: var(--a-main-color);
            }
        }
    }
}
</style>